<script setup>
import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue'
import { computed } from 'vue';
import { getFoodTypeService, getFoodByQueryService } from "@/api/food.js";
import { getRecommendFoodByDeepSeekService, getDietAdviceByUserIdService } from "@/api/deepseek.js";
import { ElMessage } from 'element-plus';
import {
  Menu as IconMenu,
  Food as IconFood,
  Dish as IconDish,
  Bowl as IconBowl,
  Sugar as IconSugar,
  Chicken as IconChicken,
  Loading,
  Search,
  Plus,
  DataAnalysis,
  ArrowUp,
  ArrowDown,
  Delete,
  Close,
  CircleClose,
  UserFilled,
  CaretRight,
  CaretBottom
} from '@element-plus/icons-vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useTokenStore } from '@/stores/token'
import { getFamilyMembersService } from "@/api/family.js";
const userStore = useUserStore()
const categories = ref([])
const activeCategory = ref(null)
const allFoods = ref([])
const foodPageDto = ref({
  typeId: null,
  page: 1,
  pageSize: 12,
  search: null
})
const all_page_num = ref(0)
const loading = ref(false)
const noMore = ref(false)
const observer = ref(null)
const loadingTrigger = ref(null)
const contentRef = ref(null)
const searchText = ref('')
const isSearchFocused = ref(false)
const compareList = ref([]) // 添加对比列表
const isCompareExpanded = ref(false) // 控制对比面板展开/收起
const router = useRouter()

// 添加推荐相关的响应式变量
const recommendFoods = ref([])
const recommendPageDto = ref({
  page: 1,
  pageSize: 6,
  userId: computed(() => selectedMemberId.value || userStore.userInfo.id)
})
const recommendLoading = ref(false)
const recommendNoMore = ref(false)
const recommendProgress = ref(0)

const tokenStore = useTokenStore()

// 添加新的响应式变量
const dietAdvice = ref('')
const isAnalyzing = ref(false)
const analyzeProgress = ref(0)

// 添加家庭成员相关变量
const familyMembers = ref([])
const selectedMemberId = ref(null)

// 修改计算属性判断是否显示推荐
const showRecommend = computed(() => {
  return activeCategory.value?.id === -1 && tokenStore.token
})

// 添加状态变量
const isPageActive = ref(true)
const pendingRecommendPromise = ref(null)

// 添加控制主要分类展开/折叠的变量
const isMainCategoriesExpanded = ref(true)

// 获取所有食品数据
const fetchAllFoods = async (isLoadMore = false) => {
  if (loading.value || noMore.value) return

  try {
    loading.value = true
    const result = await getFoodByQueryService(foodPageDto.value)
    if (result.data.currentPage != foodPageDto.value.page) {
      noMore.value = true
      if (!isLoadMore) {
        allFoods.value = [] // 如果是首次加载，清空数据
      }
      return
    }

    if (isLoadMore) {
      // 加载更多时，追加数据
      allFoods.value = [...allFoods.value, ...result.data.records]
    } else {
      // 首次加载或切换分类时，替换数据
      allFoods.value = result.data.records
    }
  } catch (error) {
    console.error('获取食品数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载更多数据
const loadMore = async () => {
  if (loading.value || noMore.value) return

  foodPageDto.value.page += 1  // 增加页码
  await fetchAllFoods(true)    // 传入 true 表示加载更多
}

// 设置 Intersection Observer
const setupIntersectionObserver = () => {
  observer.value = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        loadMore()
      }
    },
    { threshold: 0.1 }
  )

  if (loadingTrigger.value) {
    observer.value.observe(loadingTrigger.value)
  }
}

// 修改获取食品分类数据的函数
const fetchCategories = async () => {
  try {
    const result = await getFoodTypeService();
    // 添加综合分类
    const allCategory = {
      id: 0,
      name: '综合',
      icon: IconMenu
    }
    
    // 为不同类型分配不同图标
    const getIconForType = (index) => {
      const icons = [IconFood, IconDish, IconBowl, IconSugar, IconChicken];
      return icons[index % icons.length];
    };

    // 初始化分类数组
    categories.value = [allCategory];

    // 如果用户已登录，添加专属推荐分类
    if (tokenStore.token) {
      const recommendCategory = {
        id: -1,
        name: '专属推荐',
        icon: DataAnalysis
      };
      categories.value.unshift(recommendCategory);
    }

    // 添加食品类别分类
    categories.value.push(...result.data.map((item, index) => ({
      id: item.id,
      name: item.type,
      icon: getIconForType(index)
    })));

    activeCategory.value = categories.value[0];
    await fetchAllFoods();

    // 在设置完 activeCategory 后检查并获取推荐
    if (showRecommend.value) {
      await fetchRecommendFoods();
    }
  } catch (error) {
    console.error('获取分类数据失败:', error);
  }
}
//根据参数获取食品
const fetchFoodsByQuery = async (query) => {
  try {
    const result = await getFoodByQueryService(query)
    allFoods.value = result.data.records
  } catch (error) {
    console.error('获取综合食品数据失败:', error)
  }
}

// 修改选择分类的处理函数
const selectCategory = async (category) => {
  activeCategory.value = category
  // 重置所有状态
  noMore.value = false
  allFoods.value = []
  foodPageDto.value = {
    typeId: category.id === 0 ? null : category.id > 0 ? category.id : null,
    page: 1,
    pageSize: 12,
    search: null
  }

  // 切换到专属推荐且已登录时，重置并获取推荐
  if (category.id === -1 && tokenStore.token) {
    recommendFoods.value = []
    recommendPageDto.value.page = 1
    recommendNoMore.value = false
    await fetchRecommendFoods()
    await fetchDietAdvice()
  }

  // 滚动内容区域到顶部
  if (contentRef.value) {
    contentRef.value.scrollTop = 0
  }

  // 只有当不是专属推荐分类时才获取食品数据
  if (category.id !== -1) {
    await fetchFoodsByQuery(foodPageDto.value)
  }
}

// 修改数据计算属性
const paginatedFoods = computed(() => {
  return allFoods.value.map(food => ({
    id: food.foodId,
    name: food.foodName,
    image: food.picture,
    description: food.description,
    // 处理营养成分数据
    nutritionComponents: food.nutritionComponents?.length
      ? food.nutritionComponents.slice(0, 3) // 只取前3条数据
      : [{ nameCn: '营养指标', content: '适', status: 1 }] // 为空时显示绿色样式
  }))
})

// 添加一工具函数来获取状态相关的样式和图标
const getNutritionStatus = (status) => {
  switch (status) {
    case 0:
      return {
        color: '#409EFF',
        icon: '↓',
        label: '偏低'
      }
    case 1:
      return {
        color: '#67C23A', // 绿色
        icon: '─',
        label: '正常'
      }
    case 2:
      return {
        color: '#E6A23C',
        icon: '↑',
        label: '偏高'
      }
    default:
      return {
        color: '#67C23A', // 默认也使用绿色
        icon: '─',
        label: '正常'
      }
  }
}

// 处理搜索
const handleSearch = () => {
  foodPageDto.value = {
    ...foodPageDto.value,
    page: 1,
    search: searchText.value
  }
  noMore.value = false
  allFoods.value = []
  fetchAllFoods(false)
}

// 添加跳转方法
const goToDetail = (foodId) => {
  console.log('Food ID:', foodId)  // 添加控制台打印
  router.push(`/food/${foodId}`)
}

// 添加到对比
const addToCompare = (event, food) => {
  event.stopPropagation() // 阻止事件冒泡
  if (compareList.value.some(item => item.id === food.id)) {
    ElMessage.warning('该食品已在对比列表中')
    return
  }
  compareList.value.push(food)
  ElMessage.success('已添加到对比列表')
  isCompareExpanded.value = true // 添加食品时自动展开面板
}

// 从对比列表中移除
const removeFromCompare = (food) => {
  compareList.value = compareList.value.filter(item => item.id !== food.id)
  if (compareList.value.length === 0) {
    isCompareExpanded.value = false // 当列表为空时自动收起面板
  }
}

// 开始对比
const goToCompare = () => {
  if (compareList.value.length < 2) {
    ElMessage.warning('请至少选择两个食品进行对比')
    return
  }
  const foodIds = compareList.value.map(food => food.id).join(',')
  router.push(`/food-compare?foods=${foodIds}`)
}

// 清空对比列表
const clearCompareList = () => {
  compareList.value = []
  isCompareExpanded.value = false
}

// 切换面板展开状态
const toggleComparePanel = () => {
  isCompareExpanded.value = !isCompareExpanded.value
}

// 修改获取推荐食品数据的函数
const fetchRecommendFoods = async () => {
  if (!showRecommend.value) return
  if (recommendLoading.value || recommendNoMore.value) return

  try {
    recommendLoading.value = true
    recommendProgress.value = 0

    // 显示加载进度动画
    const progressInterval = setInterval(() => {
      if (recommendProgress.value < 90 && isPageActive.value) {
        recommendProgress.value += Math.random() * 2
      }
    }, 800)

    // 保存 Promise 引用
    pendingRecommendPromise.value = getRecommendFoodByDeepSeekService({
      ...recommendPageDto.value,
      userId: selectedMemberId.value || userStore.userInfo.id
    })

    const result = await pendingRecommendPromise.value

    // 只有当页面活跃时才更新UI
    if (isPageActive.value) {
      clearInterval(progressInterval)
      recommendProgress.value = 100

      if (result.code === 200) {
        if (result.data.currentPage != recommendPageDto.value.page) {
          recommendNoMore.value = true
          return
        }

        const processedFoods = result.data.records.map(food => ({
          ...food,
          tags: processNutritionTags(food.nutritionComponents)
        }))

        recommendFoods.value = [...recommendFoods.value, ...processedFoods]
        recommendPageDto.value.page++
      }
    }

  } catch (error) {
    console.error('获取推荐食品失败:', error)
    if (isPageActive.value) {
      ElMessage.warning('推荐生成较慢，请稍后重试')
    }
  } finally {
    if (isPageActive.value) {
      setTimeout(() => {
        recommendLoading.value = false
        recommendProgress.value = 0
      }, 1000)
    }
  }
}

// 添加处理营养标签的函数
const processNutritionTags = (nutritionComponents) => {
  if (!nutritionComponents?.length) {
    return [{
      label: '营养均衡',
      type: 'success'
    }]
  }

  return nutritionComponents
    .filter(n => n.status !== 1) // 只显示不正常的营养成分
    .map(n => ({
      label: `${n.nameCn}${n.status === 0 ? '偏低' : '偏高'}`,
      type: n.status === 0 ? 'warning' : 'danger'
    }))
    .slice(0, 3) // 最多显示3个标签
}

// 添加获取饮食建议的方法
const fetchDietAdvice = async () => {
  if (!showRecommend.value) return

  try {
    isAnalyzing.value = true
    analyzeProgress.value = 0

    const progressInterval = setInterval(() => {
      if (analyzeProgress.value < 90) {
        analyzeProgress.value += 1
      }
    }, 1000)

    // 修改为使用 getDietAdviceByUserIdService
    const result = await getDietAdviceByUserIdService(selectedMemberId.value || userStore.userInfo.id)
    if (result.code === 200) {
      dietAdvice.value = result.data.advice
    }

    clearInterval(progressInterval)
    analyzeProgress.value = 100

    setTimeout(() => {
      isAnalyzing.value = false
      analyzeProgress.value = 0
    }, 1000)

  } catch (error) {
    console.error('获取饮食建议失败:', error)
    ElMessage.error('获取饮食建议失败')
    isAnalyzing.value = false
    analyzeProgress.value = 0
  }
}

// 组件挂载时设置观察器
onMounted(async () => {
  await fetchCategories()
  if (tokenStore.token) {
    await fetchFamilyMembers()
  }
  setupIntersectionObserver()
})

// 组件卸载时清理观察器
onUnmounted(() => {
  if (observer.value) {
    observer.value.disconnect()
  }
})

// 在 script setup 中添加
const fetchFamilyMembers = async () => {
  // 只在用户登录时获取家庭成员
  if (!tokenStore.token) return;
  const familyRole = userStore.userInfo.familyRole;
  if (!familyRole || familyRole.id !== 1) return;

  
  try {
    const result = await getFamilyMembersService()
    if (result.code === 200) {
      familyMembers.value = result.data
    }
  } catch (error) {
    console.error('获取家庭成员失败:', error)
  }
}

// 添加成员选择方法
const selectMember = async (memberId) => {
  selectedMemberId.value = memberId
  // 重置推荐数据
  recommendFoods.value = []
  recommendPageDto.value.page = 1
  recommendNoMore.value = false
  // 重新获取数据
  await Promise.all([
    fetchRecommendFoods(),
    fetchDietAdvice()
  ])
}

// 页面激活时处理
onActivated(() => {
  isPageActive.value = true
  
  // 如果有未完成的推荐请求，继续监听它
  if (pendingRecommendPromise.value) {
    pendingRecommendPromise.value
      .then(result => {
        if (result.code === 200 && isPageActive.value) {
          const processedFoods = result.data.records.map(food => ({
            ...food,
            tags: processNutritionTags(food.nutritionComponents)
          }))
          recommendFoods.value = [...recommendFoods.value, ...processedFoods]
          recommendPageDto.value.page++
        }
      })
      .catch(error => {
        console.error('获取推荐食品失败:', error)
        if (isPageActive.value) {
          ElMessage.warning('推荐生成较慢，请稍后重试')
        }
      })
      .finally(() => {
        if (isPageActive.value) {
          recommendLoading.value = false
          recommendProgress.value = 0
          pendingRecommendPromise.value = null
        }
      })
  }
})

// 页面停用时处理
onDeactivated(() => {
  isPageActive.value = false
})

// 切换主要分类的展开状态
const toggleMainCategories = () => {
  isMainCategoriesExpanded.value = !isMainCategoriesExpanded.value
}
</script>

<template>
  <div class="page-container">
    <!-- 左侧菜单栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>食品分类</h2>
      </div>
      <div class="category-list">
        <!-- 特殊分类 - 只显示顶级分类（"专属推荐"（如果登录）和"综合"） -->
        <div v-for="category in tokenStore.token ? categories.slice(0, 2) : categories.slice(0, 1)" :key="category.id"
          :class="['category-item', { active: activeCategory?.id === category.id }]" @click="selectCategory(category)">
          <el-icon :size="20">
            <component :is="category.icon" />
          </el-icon>
          <span>{{ category.name }}</span>
        </div>
        
        <!-- 食品类别分类标题 - 可点击折叠/展开 -->
        <div class="category-section-header" @click="toggleMainCategories">
          <div class="section-title">
            <el-icon :size="16">
              <IconFood />
            </el-icon>
            <span>食品类别</span>
          </div>
          <el-icon :size="16" class="expand-icon">
            <component :is="isMainCategoriesExpanded ? CaretBottom : CaretRight" />
          </el-icon>
        </div>
        
        <!-- 主要食品分类 - 可折叠 -->
        <div v-show="isMainCategoriesExpanded" class="main-categories">
          <div v-for="category in tokenStore.token ? categories.slice(2) : categories.slice(1)" :key="category.id"
            :class="['category-item', { active: activeCategory?.id === category.id }]" @click="selectCategory(category)">
            <el-icon :size="20">
              <component :is="category.icon" />
            </el-icon>
            <span>{{ category.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="content" ref="contentRef">
      <!-- 在推荐区域的开始位置添加 -->
      <div class="recommend-section" v-if="showRecommend && tokenStore.token">
        <!-- 添加家庭成员选择区域 -->
        <div class="family-members" v-if="familyMembers.length > 0 && userStore.userInfo?.familyRole?.id === 1">
          <div class="members-header">
            <el-icon><UserFilled /></el-icon>
            <span>家庭成员</span>
          </div>
          <div class="members-list">
            <!-- 当前用户头像 -->
            <div class="member-card" 
                 :class="{ active: !selectedMemberId }"
                 @click="selectMember(null)">
              <div class="member-avatar">
                <el-avatar :size="56" :src="userStore.userInfo.avatar">
                  {{ userStore.userInfo.name?.charAt(0) }}
                </el-avatar>
                <div class="member-status" title="当前登录"></div>
              </div>
              <div class="member-info">
                <span class="member-name">我</span>
                <span class="member-role">组织者</span>
              </div>
            </div>
            <!-- 家庭成员头像 -->
            <div v-for="member in familyMembers" 
                 :key="member.userId"
                 class="member-card"
                 :class="{ active: selectedMemberId === member.userId }"
                 @click="selectMember(member.userId)">
              <div class="member-avatar">
                <el-avatar :size="56" :src="member.avatar">
                  {{ member.name?.charAt(0) }}
                </el-avatar>
              </div>
              <div class="member-info">
                <span class="member-name">{{ member.name }}</span>
                <span class="member-role">{{ member.role === '儿童' ? '儿童' : '成员' }}</span>
              </div>
            </div>
          </div>
        </div>

        <h2 class="recommend-title">
          <span class="title-text">
            {{ selectedMemberId ? `为 ${familyMembers.find(m => m.userId === selectedMemberId)?.name} 推荐` : '为您推荐' }}
          </span>
          <div class="title-decoration">
            <span class="decoration-dot"></span>
            <span class="decoration-line"></span>
          </div>
        </h2>

        <!-- 移动饮食建议部分到这里 -->
        <div class="diet-advice-section">
          <h3 class="advice-title">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            智能饮食建议
          </h3>

          <div v-if="isAnalyzing" class="analyzing-container">
            <div class="analyzing-content">
              <el-icon class="analyzing-icon">
                <Loading />
              </el-icon>
              <div class="analyzing-text">
                <p>正在智能分析中，预计一分钟，请稍等...</p>
                <el-progress :percentage="analyzeProgress" :show-text="false" :stroke-width="4" :color="'#FF9C52'"
                  class="analyzing-progress" />
              </div>
            </div>
          </div>

          <div v-else-if="dietAdvice" class="advice-content">
            <template v-for="(paragraph, index) in dietAdvice.split(/(?<=。|；)/g)" :key="index">
              <p v-if="paragraph.trim()">{{ paragraph }}</p>
            </template>
          </div>
        </div>

        <div class="recommend-cards" v-if="!recommendLoading || recommendFoods.length > 0">
          <el-card v-for="food in recommendFoods" 
                   :key="food.foodId" 
                   class="food-card apple-card" 
                   shadow="hover"
                   @click="goToDetail(food.foodId)">
            <div class="food-image">
              <img :src="food.picture" :alt="food.foodName">
              <div class="compare-btn-wrapper">
                <button class="compare-btn" 
                        :class="{ 'in-compare': compareList.some(item => item.id === food.foodId) }"
                        @click="addToCompare($event, {
                          id: food.foodId,
                          name: food.foodName,
                          image: food.picture
                        })">
                  <el-icon class="btn-icon">
                    <Plus />
                  </el-icon>
                  <span class="btn-text">加入对比</span>
                </button>
              </div>
            </div>
            <div class="food-details">
              <h3>{{ food.foodName }}</h3>
              <p v-if="food.description" class="description">{{ food.description }}</p>
              
              <!-- 添加标签展示 -->
              <div class="food-tags">
                <el-tag v-for="(tag, index) in food.tags"
                        :key="index"
                        :type="tag.type"
                        effect="light"
                        class="nutrition-tag"
                        size="small">
                  {{ tag.label }}
                </el-tag>
              </div>
            </div>
          </el-card>
          
          <!-- 添加加载更多按钮 -->
          <div class="recommend-footer" v-if="recommendFoods.length > 0">
            <template v-if="recommendNoMore">
              <div class="no-more-text">没有更多推荐了</div>
            </template>
            <template v-else>
              <button class="load-more-btn" @click="fetchRecommendFoods" :disabled="recommendLoading">
                <span v-if="!recommendLoading">加载更多</span>
                <el-icon v-else class="loading-icon"><Loading /></el-icon>
              </button>
            </template>
          </div>
        </div>
        <div v-else-if="recommendLoading" class="loading-container">
          <el-icon class="loading-icon">
            <Loading />
          </el-icon>
          <div class="loading-text">
            <p>正在智能分析中，预计一分钟，请稍等...</p>
            <el-progress :percentage="recommendProgress" :show-text="false" :stroke-width="4" :color="'#FF9C52'"
              class="loading-progress" />
          </div>
        </div>
      </div>

      <!-- 添加搜索框 - 只在非专属推荐分类时显示 -->
      <div class="search-container" v-if="activeCategory?.id !== -1" :style="{ paddingLeft: isSearchFocused ? 'calc(50% - 250px)' : '0' }"
        :class="{ 'expanded': isSearchFocused }">
        <el-input v-model="searchText" :class="['search-input', { 'expanded': isSearchFocused }]" placeholder="搜索食品名称"
          clearable @focus="isSearchFocused = true" @blur="isSearchFocused = false" @change="handleSearch">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>

      <!-- 食品卡片区 - 只在非专属推荐分类时显示 -->
      <div class="food-cards" v-if="activeCategory?.id !== -1">
        <el-card v-for="food in paginatedFoods" :key="food.id" class="food-card" shadow="hover"
          @click="goToDetail(food.id)">
          <div class="food-image">
            <img :src="food.image" :alt="food.name">
            <div class="compare-btn-wrapper">
              <button class="compare-btn" :class="{ 'in-compare': compareList.some(item => item.id === food.id) }"
                @click="addToCompare($event, food)">
                <el-icon class="btn-icon">
                  <Plus />
                </el-icon>
                <span class="btn-text">加入对比</span>
              </button>
            </div>
          </div>
          <div class="food-details">
            <h3>{{ food.name }}</h3>
            <p v-if="food.description" class="description">{{ food.description }}</p>
            <div class="nutrition-info">
              <div v-for="nutrition in food.nutritionComponents" :key="nutrition.nameEn || 'default'"
                class="nutrition-item" :style="{ color: getNutritionStatus(nutrition.status).color }">
                <span class="status-icon">{{ getNutritionStatus(nutrition.status).icon }}</span>
                <span class="label">{{ nutrition.nameCn }}:</span>
                <span class="value">{{ nutrition.content }}{{ nutrition.unit }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 添加加载触发器和状态显示 - 只在非专属推荐分类时显示 -->
      <div ref="loadingTrigger" class="loading-trigger" v-if="activeCategory?.id !== -1">
        <el-empty v-if="paginatedFoods.length === 0" description="暂无数据" />
        <div v-else-if="noMore" class="no-more">
          没有更多
        </div>
        <div v-else-if="loading" class="loading">
          <el-icon class="loading-icon">
            <Loading />
          </el-icon>
          加载中...
        </div>
      </div>
    </div>

    <!-- 右下角对比面板 -->
    <div class="compare-panel" v-show="compareList.length > 0">
      <div class="compare-header">
        <div class="compare-title">
          <span class="vs-text">VS</span>
          <span class="divider">|</span>
          <span>比较清单</span>
        </div>
        <div class="compare-expand" @click="isCompareExpanded = !isCompareExpanded">
          <el-icon>
            <ArrowDown />
          </el-icon>
        </div>
      </div>

      <div class="compare-content" v-show="isCompareExpanded">
        <div class="compare-items">
          <div v-for="item in compareList" :key="item.id" class="compare-item">
            <div class="item-image">
              <img :src="item.image" :alt="item.name">
            </div>
            <div class="item-info">
              <div class="item-name">{{ item.name }}</div>
            </div>
            <div class="remove-btn" @click="removeFromCompare(item)" title="删除">
              <el-icon>
                <Delete />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="compare-actions">
          <el-button type="primary" @click="goToCompare" :disabled="compareList.length < 2" size="small">比较</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: #f5f7fa;
}

.sidebar {
  width: 220px;
  min-width: 220px;
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  position: fixed;
  left: 0;
  top: 70px;
  bottom: 60px;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  background: linear-gradient(135deg, #FFB77D, #FF9C52);
  color: white;
  text-align: center;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.category-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-list::-webkit-scrollbar {
  width: 3px;
}

.category-list::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
}

.category-list::-webkit-scrollbar-track {
  background: transparent;
}

.category-item {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  margin: 2px 8px;
  border-radius: 4px;
}

.category-item:hover {
  color: #FF9C52;
  background: #FFF4EB;
  transform: translateX(4px);
}

.category-item.active {
  background: #FF9C52;
  color: white;
}

.category-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
}

/* 添加折叠分类相关样式 */
.category-section-header {
  padding: 12px 16px;
  margin: 10px 8px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #f8f9fc;
  border-radius: 8px;
  color: #606266;
  font-weight: 500;
  transition: all 0.3s ease;
}

.category-section-header:hover {
  background: #f0f2f5;
  color: #FF9C52;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-icon {
  transition: transform 0.3s ease;
}

.main-categories {
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px dashed rgba(255, 156, 82, 0.2);
  margin-left: 16px;
}

.content {
  flex: 1;
  margin-left: 220px;
  margin-top: 10px;
  padding: 24px;
  padding-bottom: 60px;
  overflow-y: auto;
  height: calc(100vh - 80px);
}

.food-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.food-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.food-card:hover {
  transform: translateY(-5px);
}

.food-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.food-card:hover .food-image img {
  transform: scale(1.05);
}

.food-details {
  padding: 16px;
}

.food-details h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #303133;
}

.nutrition-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.nutrition-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.3s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.status-icon {
  font-size: 14px;
  min-width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.label {
  margin-right: 2px;
  flex-shrink: 0;
}

.value {
  font-weight: 500;
  flex-shrink: 0;
}

.price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
}

.description {
  font-size: 12px;
  color: #909399;
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.loading-trigger {
  text-align: center;
  padding: 20px 0;
  color: #909399;
  font-size: 14px;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-icon {
  animation: rotating 2s linear infinite;
}

.no-more {
  color: #909399;
  font-size: 14px;
}

@keyframes rotating {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 搜索框样式 */
.search-container {
  margin-bottom: 24px;
  width: 100%;
  display: flex;
  padding-left: 0;
  transition: all 0.5s ease;
}

.search-container:has(.expanded) {
  padding-left: calc(50% - 250px);
}

.search-input {
  width: 300px;
  transition: all 0.5s ease;
}

.search-input.expanded {
  width: 500px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: none;
  background: white;
  border: 1px solid #dcdfe6;
  transition: all 0.1s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #c0c4cc;
}

.search-input.expanded :deep(.el-input__wrapper) {
  border-color: #409EFF;
  box-shadow: 0 0 0 1px #409EFF;
}

.search-input :deep(.el-input__inner) {
  height: 40px;
  font-size: 16px;
}

.search-input :deep(.el-input__prefix) {
  color: #909399;
  font-size: 18px;
  margin-right: 4px;
}

.search-input :deep(.el-input__suffix) {
  color: #909399;
}

.compare-btn-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0;
}

.food-card:hover .compare-btn-wrapper {
  opacity: 1;
}

.compare-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 0 8px 0 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--el-color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.compare-btn:hover {
  background: var(--el-color-primary);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.compare-btn.in-compare {
  background: var(--el-color-success);
  color: white;
}

.compare-btn .btn-icon {
  font-size: 14px;
}

.compare-btn .btn-text {
  font-weight: 500;
}

.compare-btn:active {
  transform: translateY(0);
}

.compare-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 240px;
  overflow: hidden;
}

.compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #4263EB;
  color: white;
  cursor: pointer;
}

.compare-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.vs-text {
  font-weight: 600;
}

.divider {
  opacity: 0.6;
}

.compare-expand {
  font-size: 14px;
}

.compare-content {
  padding: 8px;
  background: white;
  max-height: 300px;
  overflow-y: auto;
}

.compare-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.compare-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  background: #f5f7fa;
  gap: 8px;
}

.compare-item:hover {
  background: #f0f2f5;
}

.item-image {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 12px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #909399;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.remove-btn:hover {
  background: #f56c6c;
  color: white;
}

.remove-btn .el-icon {
  font-size: 18px;
}

.compare-actions {
  display: flex;
  justify-content: center;
  padding: 0 8px 8px;
}

.compare-actions .el-button {
  min-width: 100px;
}

.compare-content::-webkit-scrollbar {
  width: 4px;
}

.compare-content::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
}

.compare-content::-webkit-scrollbar-track {
  background: transparent;
}

/* 修改推荐板块样式 */
.recommend-section {
  margin-top: 24px;
  margin-bottom: 40px;
  background: linear-gradient(to right, #ffffff, #f8faff);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(66, 99, 235, 0.08);
  position: relative;
  overflow: hidden;
}

/* 添加背景装饰 */
.recommend-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(66, 99, 235, 0.05) 0%, rgba(66, 99, 235, 0) 70%);
  border-radius: 50%;
  transform: translate(100px, -100px);
}

.recommend-title {
  margin-bottom: 32px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
}

.recommend-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(to bottom, #4263eb, #6d8dff);
  border-radius: 2px;
}

.recommend-title .title-text {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(135deg, #1a1f36, #4263eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.title-decoration {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
}

.decoration-dot {
  width: 6px;
  height: 6px;
  background: #4263eb;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.decoration-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #4263eb, transparent);
}

.recommend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.recommend-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 32px;
}

.load-more-btn {
  min-width: 140px;
  height: 40px;
  background: linear-gradient(135deg, #4263eb, #6d8dff);
  border: none;
  border-radius: 20px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-more-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 99, 235, 0.2);
}

.load-more-btn:not(:disabled):active {
  transform: translateY(0);
}

.load-more-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.load-more-btn .loading-icon {
  animation: rotating 2s linear infinite;
}

.no-more-text {
  color: #909399;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  background: #f8faff;
  border-radius: 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 修改推荐卡片样式 */
.recommend-section .food-card {
  transition: all 0.3s ease;
  border: none;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.recommend-section .food-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(66, 99, 235, 0.12);
}

.recommend-section .food-image {
  height: 200px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.recommend-section .food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.recommend-section .food-card:hover .food-image img {
  transform: scale(1.08);
}

.recommend-section .food-details h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1f36;
  margin-bottom: 12px;
}

.recommend-section .nutrition-info {
  background: #f8faff;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
}

.recommend-section .nutrition-item {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.recommend-section .nutrition-item:hover {
  background: rgba(66, 99, 235, 0.05);
}

/* 修改饮食建议相关样式 */
.diet-advice-section {
  margin: 20px 0 40px;
  padding: 30px;
  border-radius: 16px;
  background: #FFF9E6;
  box-shadow: 0 4px 20px rgba(255, 156, 82, 0.08);
}

.advice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: #1a1f36;
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
}

.advice-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #FF9C52, #FFB77D);
  border-radius: 2px;
}

.advice-title .el-icon {
  color: #FF9C52;
  font-size: 20px;
}

.analyzing-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 24px;
  margin: 0 20px;
}

.analyzing-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.analyzing-icon {
  font-size: 24px;
  color: #FF9C52;
  animation: rotating 2s linear infinite;
}

.analyzing-text {
  flex: 1;
}

.analyzing-text p {
  margin: 0 0 12px;
  color: #1a1f36;
  font-size: 14px;
}

.analyzing-progress {
  width: 100%;
}

.analyzing-progress :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #FF9C52, #FFB77D);
  transition: width 0.3s ease;
}

.analyzing-progress :deep(.el-progress-bar__outer) {
  background-color: rgba(255, 156, 82, 0.1);
  border-radius: 4px;
}

.advice-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 24px;
  margin: 0 20px;
  line-height: 1.6;
  color: #1a1f36;
}

.advice-content p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.8;
  position: relative;
  padding-left: 18px;
}

.advice-content p::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #FF9C52;
  font-size: 18px;
  line-height: 1.5;
}

.advice-content p:last-child {
  margin-bottom: 0;
}

/* 添加加载容器样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  margin: 20px;
  width: 100%;
}

.loading-container .loading-icon {
  font-size: 32px;
  color: #FF9C52;
  animation: rotating 2s linear infinite;
  margin-bottom: 24px;
}

.loading-container .loading-text {
  width: 100%;
  max-width: 400px;
}

.loading-container .loading-text p {
  color: #1a1f36;
  font-size: 14px;
  margin: 0 0 16px;
  text-align: center;
}

.loading-container .loading-progress {
  width: 100%;
}

.loading-container .loading-progress :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #FF9C52, #FFB77D);
  transition: width 0.3s ease;
}

.loading-container .loading-progress :deep(.el-progress-bar__outer) {
  background-color: rgba(255, 156, 82, 0.1);
  border-radius: 4px;
}

/* 添加家庭成员相关样式 */
.family-members {
  margin-bottom: 36px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(240, 247, 255, 0.8));
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.family-members::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="30" cy="10" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="50" cy="10" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="70" cy="10" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="90" cy="10" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="10" cy="30" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="30" cy="30" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="50" cy="30" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="70" cy="30" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="90" cy="30" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="10" cy="50" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="30" cy="50" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="50" cy="50" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="70" cy="50" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="90" cy="50" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="10" cy="70" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="30" cy="70" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="50" cy="70" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="70" cy="70" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="90" cy="70" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="10" cy="90" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="30" cy="90" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="50" cy="90" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="70" cy="90" r="2" fill="%23e0e7ff" opacity="0.3"/><circle cx="90" cy="90" r="2" fill="%23e0e7ff" opacity="0.3"/></svg>');
  opacity: 0.5;
  z-index: 0;
}

.members-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #4263EB, #6D8DFF);
  padding: 16px 24px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.members-header .el-icon {
  font-size: 20px;
}

.members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4263EB, #6D8DFF);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(66, 99, 235, 0.1);
  border-color: rgba(66, 99, 235, 0.3);
}

.member-card.active {
  background: linear-gradient(135deg, #4263EB, #6D8DFF);
  color: white;
  box-shadow: 0 10px 25px rgba(66, 99, 235, 0.2);
  transform: translateY(-5px);
}

.member-card.active .member-role,
.member-card.active .member-name {
  color: white;
}

.member-avatar {
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.member-status {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background: #10B981;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member-avatar .el-avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 3px solid white;
  transition: all 0.3s ease;
}

.member-card:hover .el-avatar {
  box-shadow: 0 8px 20px rgba(66, 99, 235, 0.15);
}

.member-card.active .el-avatar {
  border-color: rgba(255, 255, 255, 0.8);
}

.member-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.member-name {
  font-size: 16px;
  font-weight: 600;
  color: #1A1F36;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.member-role {
  font-size: 13px;
  color: #6B7280;
  background: rgba(245, 247, 250, 0.8);
  padding: 3px 10px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.member-card.active .member-role {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .members-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px;
  }
  
  .member-card {
    padding: 12px;
  }
  
  .member-avatar .el-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
  
  .member-name {
    font-size: 14px;
  }
  
  .member-role {
    font-size: 12px;
  }
}

/* 在 style 部分添加新的样式 */
.apple-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.apple-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.apple-card .food-image {
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.apple-card .food-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.apple-card:hover .food-image::after {
  opacity: 1;
}

.apple-card .food-details {
  padding: 20px;
}

.apple-card .food-details h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1d1d1f;
  letter-spacing: -0.5px;
}

.apple-card .description {
  font-size: 14px;
  line-height: 1.5;
  color: #86868b;
  margin-bottom: 16px;
}

.food-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.nutrition-tag {
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.nutrition-tag.el-tag--success {
  background-color: #e8fdf5;
  border-color: #dcf7ed;
  color: #0c977d;
}

.nutrition-tag.el-tag--warning {
  background-color: #fff8e6;
  border-color: #ffedc4;
  color: #946200;
}

.nutrition-tag.el-tag--danger {
  background-color: #fff2f0;
  border-color: #ffccc7;
  color: #cf1322;
}

/* 优化加载动画样式 */
.loading-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}

.loading-progress :deep(.el-progress-bar__outer) {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.loading-progress :deep(.el-progress-bar__inner) {
  border-radius: 8px;
  background: linear-gradient(90deg, #0071e3, #2eaadc);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
